<template>
  <Card>
    <Form :model="detail" :label-width="150" ref="detail">
      <h3 class="form-tip">
        {{ add ? '新增海报':'海报详情'}}
      </h3>
      <Row>
        <FormItem label="标题：" prop="title">
          <Input style="width: 250px;" v-model="detail.title"/>
        </FormItem>
      </Row>
      <Row>
        <FormItem label="海报图片：" prop="picture" >
          <img v-if="detail.posterSrc" style="height:200px;width:300px" :src="detail.posterSrc" />
          <qiniu-upload v-bind:imgUrl.sync='detail.posterSrc'  :rate1="0.33" :rate2="3" :buttonText="add?'上传海报':'更改海报'"/>
        </FormItem>
      </Row>
      <FormItem>
        <Button type="primary" :loading="saveLoading" @click="save">{{ add ? '新增':'保存'}}
        </Button>
      </FormItem>
    </Form>
  </Card>
</template>

<script>
import { getPosterDetail, editPoster } from '@/api/poster'
import qiniuUpload from "_c/upload/qiniuUpload.vue"

export default {
  components: {
    qiniuUpload
  },
  name: 'poster-detail',
  data () {
    return {
      detail: {
        title: '',
        posterSrc: ''
      },
      add: false,
      saveLoading: false
    }
  },
  methods: {
    save () {
      this.saveLoading = true
      if (this.add) {
        editPoster(this.detail).then(()=> {
          this.$Message.success('新增成功')
          this.saveLoading = false
          this.$router.go(-1)
        },() => {
          this.saveLoading = false
        })
      } else {
        let params = Object.assign({},this.detail,{id:this.$route.query.id})
        editPoster(params).then(()=> {
          this.$Message.success('修改成功')
          this.saveLoading = false
          this.$router.go(-1)
        },() => {
          this.saveLoading = false
        })
      }
    },
  },
  mounted () {
    if (this.$route.query.id) {
      getPosterDetail(this.$route.query.id).then(data => {
        this.detail = data
      })
    } else {
      this.add = true
    }
  }
}
</script>

<style scoped>

</style>
